<!--
 * @Author: Li Zengkun
 * @Date: 2022-09-26 23:25:44
 * @LastEditors: Li Zengkun
 * @LastEditTime: 2022-09-28 09:11:32
 * @Description: 
-->
<template>
  <div>
    <el-card shadow="hover">
      <template #header> 发布商品 </template>
      <el-form
        ref="formRef"
        class="form"
        label-position="top"
        :rules="rules"
        :model="goodsForm"
      >
        <el-row>
          <el-col :span="5">
            <el-form-item label="商品一级分类" prop="cate_1st">
              <el-select
                placeholder="请选择一级分类"
                v-model="goodsForm.cate_1st"
              >
                <el-option
                  v-for="item in cate1List"
                  :key="item.id"
                  :value="item.id"
                  :label="item.name"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label="二级分类" prop="cate_2nd">
              <el-select
                placeholder="请选择二级分类"
                v-model="goodsForm.cate_2nd"
              >
                <el-option
                  v-for="item in cate2List"
                  :key="item.id"
                  :value="item.id"
                  :label="item.name"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label="三级分类">
              <el-select
                placeholder="请选择三级分类"
                v-model="goodsForm.cate_3rd"
              >
                <el-option
                  v-for="item in cate3List"
                  :key="item.id"
                  :value="item.id"
                  :label="item.name"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <el-form-item label="商品名称" prop="name">
          <el-input v-model="goodsForm.name"></el-input>
          <div class="tip">商品标题名称长度至少3个字符，最长200个汉字</div>
        </el-form-item>
        <el-form-item label="商品卖点">
          <el-input type="textarea" v-model="goodsForm.hotPoint"></el-input>
          <div class="tip">商品卖点不能超过140个汉字</div>
        </el-form-item>
        <el-form-item label="商品价格" prop="price">
          <el-input type="number" v-model.number="goodsForm.price"
            ><template #append>元</template></el-input
          >
          <div class="tip">
            价格必须是0-999999之间的数字，且不能高于市场价此价格为商品实际销售价格，如果商品存在规格，改价格显示最低价格
          </div>
        </el-form-item>
        <el-form-item label="市场价" prop="marketPrice">
          <el-input type="number" v-model.number="goodsForm.marketPrice"
            ><template #append>元</template></el-input
          >
          <div class="tip">
            价格必须是0-999999之间的数字，此价格仅为市场参考价，请根据实际情况认真填写
          </div>
        </el-form-item>
        <el-form-item label="成本价" prop="cost">
          <el-input type="number" v-model.number="goodsForm.cost"
            ><template #append>元</template></el-input
          >
          <div class="tip">
            价格必须是0-999999之间的数字，此价格为商户对所销售的商品的实际成本价进行备注记录，非必填选项，不会在前台销售页面中显示
          </div>
        </el-form-item>
        <el-form-item label="折扣" prop="discount">
          <el-input v-model="discount" disabled
            ><template #append>折</template></el-input
          >
          <div class="tip">根据销售价与市场价比例自动生成不需要编辑</div>
        </el-form-item>
        <el-form-item label="商品库存" prop="inventory">
          <el-input type="number" v-model.number="goodsForm.inventory"
            ><template #append>件</template></el-input
          >
          <div class="tip">
            库存必须是0-999999之间的整数若启动了库存配置，则系统自动计算商品的总数，此处无需卖家填写
          </div>
        </el-form-item>
        <el-form-item label="商品货号" prop="articleNo">
          <el-input v-model="goodsForm.articleNo"></el-input>
          <div class="tip">
            商品货号是商家管理商品的编号，买家不可见最多输入20个字符，只支持输入中文、字母、数字、_、/、-和小数点
          </div>
        </el-form-item>
        <el-form-item label="商品主图" prop="img_lg">
          <ImgUpload
            v-model:url="goodsForm.img_md"
            v-model:lg-img="goodsForm.img_lg"
            action="http://localhost:3003/upload/goods"
          />
          <div class="tip">
            上传商品默认主图，如多规格时将默认图片或分规格上传规格主图，支持jpg、if、png格式上传或从图片空间选中，建议使用尺寸
            800*800像素以上，大小不超过1M的正方形图片，上传后的图片将自动保存在图片空间的默认分类中
          </div></el-form-item
        >
        <el-form-item label="商品轮播图" prop="slider">
          <SliderUpload
            v-model="goodsForm.slider"
            action="http://localhost:3003/upload/slider"
          />
          <div class="tip">
            上传商品轮播图，如多规格时将默认图片或分规格上传规格主图，支持jpg、png格式上传或从图片空间选中，大小不超过2M的正方形图片，上传后的图片将自动保存在图片空间的默认分类中,轮播图不超过6张
          </div></el-form-item
        >

        <div class="title">商品详情描述</div>

        <el-form-item label="商品品牌">
          <el-input v-model="goodsForm.brand"></el-input>
        </el-form-item>
        <el-form-item label="商品描述" prop="detail">
          <WangEditor v-model="goodsForm.detail" />
        </el-form-item>

        <div class="title">商品物流信息</div>
        <el-form-item label="所在地"></el-form-item>
        <el-form-item label="运费" prop="freight">
          <el-input v-model="goodsForm.freight"></el-input>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="handleSave" size="large"
            >提交</el-button
          >
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>
 
<script setup>
import { ref, reactive, computed, watch } from "vue";
import { goods, category } from "@/api";
import WangEditor from "@/components/common/WangEditor.vue";
import ImgUpload from "@/components/common/ImgUpload.vue";
import SliderUpload from "@/components/common/SliderUpload.vue";

const formRef = ref(null);

const goodsForm = ref({
  cate_1st: null,
  cate_2nd: null,
  cate_3rd: null,
  name: "",
  hotPoint: "",
  price: undefined,
  marketPrice: undefined,
  cost: null,
  // 折扣
  discount: null,
  // 库存
  inventory: null,
  // 货号
  articleNo: null,
  img_lg: "",
  img_md: "",
  slider: "",
  brand: null,
  detail: null,
  // 运费
  freight: null,
});

watch(goodsForm, (value) => {
  console.log(value);
});

const discount = computed({
  get() {
    if (!goodsForm.value.price || !goodsForm.value.marketPrice) return null;
    goodsForm.value.discount =
      (goodsForm.value.price / goodsForm.value.marketPrice) * 10;
    return goodsForm.value.discount;
  },
});

// 表单校验
const rules = reactive({
  cate_1st: [{ required: true, message: "请填写一级分类", trigger: "blur" }],
  cate_2nd: [{ required: true, message: "请填写二级分类", trigger: "blur" }],
  name: [{ required: true, message: "请填写商品名", trigger: "blur" }],
  price: [{ required: true, message: "请填写价格", trigger: "blur" }],
  marketPrice: [{ required: true, message: "请填写市场价", trigger: "blur" }],
  cost: [{ required: true, message: "请填写成本价", trigger: "blur" }],
  discount: [{ required: true, message: "请填写折扣", trigger: "blur" }],
  inventory: [{ required: true, message: "请填写库存", trigger: "blur" }],
  articleNo: [{ required: true, message: "请填写货号", trigger: "blur" }],
  img_lg: [{ required: true, message: "请填写主图", trigger: "blur" }],
  slider: [{ required: true, message: "请填写轮播图", trigger: "blur" }],
  detail: [{ required: true, message: "请填写详情", trigger: "blur" }],
  freight: [{ required: true, message: "请填写运费", trigger: "blur" }],
});

// 商品分类
const cate = (await category.getAll({ type: "tree" })).data;
let cate1List = cate[0].children;
let cate2List = computed(() => {
  if (!goodsForm.value.cate_1st) return null;
  return cate1List.find((item) => item.id === goodsForm.value.cate_1st)
    .children;
});
let cate3List = computed(() => {
  if (!goodsForm.value.cate_2nd) return null;
  return cate2List.value.find((item) => item.id === goodsForm.value.cate_2nd)
    .children;
});
watch(
  () => goodsForm.value.cate_1st,
  () => {
    goodsForm.value.cate_2nd = null;
    goodsForm.value.cate_3rd = null;
  }
);
watch(
  () => goodsForm.value.cate_2nd,
  () => {
    goodsForm.value.cate_3rd = null;
  }
);

const handleSave = () => {
  formRef.value.validate(async (valid, fields) => {
    if (valid) {
      console.log("submit");
      let { status, msg, data } = await goods.add(goodsForm.value);
      ElMessage({
        type: status ? "success" : "error",
        message: status ? "添加成功" : "添加失败",
      });
      if (status) {
        goodsForm.value = {
          cate_1st: null,
          cate_2nd: null,
          cate_3rd: null,
          name: "",
          hotPoint: "",
          price: undefined,
          marketPrice: undefined,
          cost: null,
          // 折扣
          discount: null,
          // 库存
          inventory: null,
          // 货号
          articleNo: null,
          img_lg: "",
          img_md: "",
          slider: "",
          brand: null,
          detail: null,
          // 运费
          freight: null,
        };
      }
    } else {
      ElMessage.error("请填写完整表单");
    }
  });

  console.log(goodsForm.value);
};
</script>

<style lang='less' scoped>
.el-form {
  .title {
    background: rgba(0, 0, 0, 0.05);
    padding: 10px;
  }
  .el-button {
    width: 100%;
  }
  .tip {
    font-size: 12px;
    color: #999;
  }
}
</style>
